<template>
  <el-card style="margin: 20px 0">
    <div class="top">
      <el-tabs v-model="activeName">
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
      </el-tabs>

      <div class="time">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMon">本月</span>
        <span @click="setYear">本年</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="--"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="16" :offset="0">
          <div class="bar" ref="bar">123132</div>
        </el-col>
        <el-col :span="8" :offset="0">
          <Scroll :data="listData" class="seamless-warp">
            <ul class="item">
              <li v-for="(item, index) in listData">
                <span class="title" v-text="item.title"></span
                ><span class="date" v-text="item.date"></span>
              </li>
            </ul>
          </Scroll>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import Scroll from "vue-seamless-scroll";
import dayjs from "dayjs";
export default {
  components: { Scroll },
  name: "Main",
  watch: {
    activeName(a) {
      console.log(a);
      this.myCharts.setOption({
        title: {
          text: a == "sale" ? "销售量" : "访问量",
        },
      });
    },
  },
  mounted() {
    this.myCharts = echarts.init(this.$refs.bar);
    let option = {
      title: {
        text: "访问量",
      },
      xAxis: {
        type: "category",
      },
      yAxis: {},
      series: {
        type: "bar",
        data: [25, 40, 30, 60, 48, 20],
      },
    };
    this.myCharts.setOption(option);
  },
  data() {
    return {
      activeName: "visit",
      time: [],
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
    };
  },
  methods: {
    setWeek() {
      let start = dayjs().day(1).format("YYYY-MM-DD");
      let end = dayjs().day(7).format("YYYY-MM-DD");
      this.time = [start, end];
    },
    setMon() {
      let start = dayjs().startOf("month").format("YYYY-MM-DD");
      let end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.time = [start, end];
    },
    setYear() {
      let start = dayjs().startOf("year").format("YYYY-MM-DD");
      let end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.time = [start, end];
    },
    setToday() {
      //市场当中:关于日期相关的出名插件moment|dayjs,用法基础差不多!!!

      //获取今日的时间
      let start = dayjs().format("YYYY-MM-DD");
      let end = dayjs().format("YYYY-MM-DD");
      this.time = [start, end];
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  position: relative;
  .time {
    position: absolute;
    top: 0;
    right: 0;
    span {
      margin: 0 20px;
    }
  }
}
.bar {
  height: 400px;
  width: 100%;
}
.seamless-warp {
  height: 400px;
  overflow: hidden;
}
</style>